<template>
  <MoreInfo title="内置几何体">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="item in data"
        :key="item.name"
        :title="item.title"
        :name="item.name"
      >
        <div
          v-for="value in item.items"
          :key="value.name"
        >
          {{ value.title }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </MoreInfo>
</template>

<script setup lang="ts">
import MoreInfo from '@/components/MoreInfo.vue'

const data = [
  {
    name: '1',
    title: '基础几何体',
    items: [
      { name: 'BoxGeometry', title: 'BoxGeometry - 立方体' },
      { name: 'SphereGeometry', title: 'SphereGeometry - 球体' },
      { name: 'PlaneGeometry', title: 'PlaneGeometry - 平面' },
      { name: 'CircleGeometry', title: 'CircleGeometry - 圆形' },
      { name: 'CylinderGeometry', title: 'CylinderGeometry - 圆柱体' },
      { name: 'ConeGeometry', title: 'ConeGeometry - 圆锥体' },
      { name: 'TorusGeometry', title: 'TorusGeometry - 环形/甜甜圈形状' },
      { name: 'TorusKnotGeometry', title: 'TorusKnotGeometry - 环形结' }
    ]
  },
  {
    name: '2',
    title: '多面体',
    items: [
      { name: 'TetrahedronGeometry', title: 'TetrahedronGeometry - 四面体' },
      { name: 'OctahedronGeometry', title: 'OctahedronGeometry - 八面体' },
      { name: 'DodecahedronGeometry', title: 'DodecahedronGeometry -  十二面体' },
      { name: 'IcosahedronGeometry', title: 'IcosahedronGeometry - 二十面体' },
      { name: 'PolyhedronGeometry', title: 'PolyhedronGeometry - 自定义多面体' }
    ]
  },
  {
    name: '3',
    title: '其他特殊几何体',
    items: [
      { name: 'RingGeometry', title: 'RingGeometry - 环形平面' },
      { name: 'TubeGeometry', title: 'TubeGeometry - 管道几何体' },
      { name: 'ExtrudeGeometry', title: 'ExtrudeGeometry - 拉伸几何体' },
      { name: 'LatheGeometry', title: 'LatheGeometry - 旋转几何体' },
      { name: 'ShapeGeometry', title: 'ShapeGeometry - 形状几何体' },
      { name: 'TextGeometry', title: 'TextGeometry - 文本几何体' }
    ]
  }
]

const activeNames = data.map((item) => item.name)
</script>